前言

非常感謝六角學院在今年疫情最嚴重的5、6月份，提供了一系列的線上體驗學習課程，能夠從課程中，再度複習了CSS、SCSS還有 Bootstrap 5 的使用技巧，觀摩不少同學的筆記和語法。

之前的學習一直都是個別練習，像是 Sass 學完就沒有再多加應用於其他作品上，而Bootstrap 也是很快速地看了幾個線上課程就沒再使用，剛好趁著六角學院提供募資平台的設計稿，教學影片也分別有 SCSS 和 Bootstrap 5，就著手嘗試製作。

課程影片：
六角學院 - Bootstrap 5 新手教學實戰營 - 最終版型講解 (上)
六角學院 - 第四堂 SCSS 切版任務 - 上半部

募資平台網站介紹

• 此為募資網站，有登入視窗
• 產品的募資金額、進度
• 中間主要為以頁籤來顯示：產品內容介紹、留言區、專案進度...等詳細資料
• 在畫面右側，會有各個募資的選項，可以依據需求來選取贊助專案

成品

製作要點

1. 隔線系統的規劃

• BS5為手機版優先，所以可以直接設定 lg 或 md
• 下圖的劃分為左7(col-md-7)、右5(col-md-5)
  左方：放入產品主要照片
  右方：募資金額、icon、贊助、分享等按鈕
• 在 Bootstrap 5 新手教學實戰營 - 最終版型講解 (下) 7:40 左右，老師也走提到，哪些地方可以不用特意使用隔線系統

2. 善用Bootstrap 官方文件查詢

使用 Bootstrap 5 來製作，最長需要的就是文件參考，並複製網站的語法啦。
所以像是導覽列(Navbar)、進度條(Progress)、工具提示框(Tooltips)，都可以用關鍵字在官方文件搜尋。

進度條的製作

• 使用BS5的progress
  • progress為外層的div,progress-bar為內層有顏色區塊
  • 顏色的修改可以到scss_variables.scss去修改，或是

<div class="progress mb-3">
<div class="progress-bar bg-primary" role="progressbar" style="width: 45%;" aria-valuenow="25"
              aria-valuemin="0" aria-valuemax="100">45%</div>
 </div>

icon小標籤

• 使用BS5的Tooltips
  • 要先加入JS語法
  • 在要顯示的圖示加入data-bs-toggle="tooltip" 與JS語法呼應，data-bs-placement="top" title="品質保證"標籤要顯示的位置與顯示的文字

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

 <li>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="品質保證"><img src="https://hexschool.github.io/boootstrap5WebLayout/assets/icon_good02.svg" alt="品質保證">
  </a>
  </li>

補充SCSS檔案編制

• 在第四堂 SCSS 切版任務 - 下半部 老師透過講解學員切版架構的檔案，來講解SCSS的分檔。
  • 分檔的方式主要視自己專案上的區分來編制
• 幾個檔案名稱整理
  • vendor:外部套件，放置bootstrap或其他frameworks、liberaries、hover.css
  • utils(helpers):工具類的class，放置字的大小、margin、border顏色設置、hover效果
  • partials:放置一些部分區域的css，如：nav、footer
  • layout: （共通的佈局）如表頭、表尾，就是每頁都會出現
    而這幾個檔案，放在main.scss要有順序
    
  • base: p段落、h1..等的全站設定(css reset)
  • components ：元件，如按鈕、卡片的設定
• 在檔案的分配以及裡面的設定，還有很多需要學習，一開始嘗試著拆分SCSS檔案結構總是不知道如何下手，回頭來看此專案也發現有需多可以加強的地方。